<template>
    <!-- 在组件模板区,可以直接使用当前组件实例上的属性. -->
    <div class="detail-page">
        <!-- Header组件 -->
        <Header>
            <template v-slot:left>
                <span @click="$router.go(-1)">&lt;</span>
            </template>
            <template v-slot:middle>
                店铺详情页
            </template>
        </Header>
        <!-- 店铺信息 -->
        <div class="title">
            <span>{{$route.params.item.name}}</span>
            <div>
                <!-- <span @click="$store.commit('collect', $route.params.item )">收藏</span> -->
                <!-- 如果当前店铺对象 在收藏列表中,显示"取消收藏"按钮 -->
                <!-- 如果当前店铺对象 不在收藏列表中,显示"收藏"按钮 -->

                <!-- 这里需要拿到 当前店铺对象 和 收藏列表 -->
                <!-- 当前店铺对象: $route.params.item -->
                <!-- 店铺列表: collectList -->
                <span v-if="collectList.find((item)=>{ return item.id === $route.params.item.id })" @click="cancel_collect($route.params.item.id); $toast('已取消收藏!')">取消收藏</span>
                <span v-else  @click="collect($route.params.item);$toast('收藏成功!')">收藏</span>
                
            </div>
        </div>

        <!-- 导航+列表 -->
        <!-- <div class="nav-list">
            <div class="nav">
               
                <router-link :to="`/detail/${index}`" class="nav-item" v-for="(item,index) in list" :key="index"> {{item.title}} </router-link>
            </div>
            <div class="list">
                
                <router-view></router-view>
            </div>
        </div> -->

        <div class="nav-list">
            <!-- 导航 -->
            <div class="nav">
                <div :class="{'nav-item':true,active:currentIndex===index }" @click="currentIndex=index" v-for="(item,index) in list" :key="index"> {{item.title}} </div>
            </div>
            <!-- 列表 -->
            <div class="list" v-if="list.length > 0">
                <div class="item" v-for="(item,index) in list[currentIndex].content" :key="index">
                    <div class="pic">
                        <img :src="item.pic" alt="">
                    </div>
                    <div class="text">
                        <div class="name">{{item.name}}</div>
                        <div>{{item.desc}}</div>
                        <div>¥{{item.price}}</div>
                    </div>
                    <div class="btn" @click="add_to_cart(item)">+</div>
                </div>
            </div>
        </div>

        <!-- 统计条 -->
        <div class="summary">
            <div class="text">
                <div>
                    <img @click="show=true" src="https://dummyimage.com/30x30" alt="">
                    <span>10</span>    
                </div>
                <div>¥500</div>
            </div>
            <div class="btn">去结算</div>
        </div>

        <!-- 购物车组件 -->
        <Cart v-if="show" @hide="show=false"></Cart>
    </div>
</template>

<script>
//引入mapMutations方法 
//mapMutations 负责将当前组件和vuex关联起来,负责注入vuex中的同步方法到当前组件.
import { mapState, mapMutations } from 'vuex'
import Axios from 'axios'

export default {
    data(){
        return {
            show:false,//控制购物车组件显示/隐藏
            currentIndex:0,//当前点击导航的索引
            list:[]//导航+列表数据
        }
    },
    mounted(){
        //console.log(this.$route.params.item.id,this.collectList, this.collectList.find((item)=>{ return item.id === this.$route.params.item.id }) )
        Axios.get('/goodlist').then((res)=>{
            console.log(res.data.list);
            //this.$data.list = res.data.list;
            this.list = res.data.list;
        })
    },
    computed:{
        ...mapState(['collectList'])
    },
    methods:{
        ...mapMutations(['collect','cancel_collect','add_to_cart'])
    }
}
</script>
<style scoped >
.detail-page .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
}
.detail-page .nav-list {
    display: flex;
}
.detail-page .nav-list .nav{
    text-align: center;
    line-height: 50px;
    width: 100px;
}

.detail-page .nav-list .nav .nav-item{
    display: block;
}
.detail-page .nav-list .nav .nav-item.active{
    font-weight: bold;
}
.detail-page .nav-list .list{
    flex: 1;
}
.detail-page .nav-list .list .item{
    position: relative;
    display: flex;
    margin: 20px;
}
.detail-page .nav-list .list .item .btn{
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: lightskyblue;
    color: white;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
}
.detail-page .nav-list .list .item .pic{
    width: 80px;
    margin-right: 20px;
}
.detail-page .nav-list .list .item .pic img{
    width: 100%;
}

.detail-page .nav-list .list .item .text{
    flex: 1;
}
.detail-page .nav-list .list .item .text .name{
    font-weight: bold;
    margin-bottom: 10px;
}
.summary{
    z-index: 999;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    box-sizing: border-box;
    background-color: #333;
    color: white;
}
.summary .text{
    display: flex;
}
</style>